
<template>
<!-- 搜索商品，模糊搜索 -->
    <div class="sortNumgood">
        <el-form-item :label="labelTxt" :label-width="showWidth">
            <el-input v-model="showgood"  autocomplete="off" placeholder="按照名称搜索"></el-input>
            <ul>
                <li v-for="(item,i) in lilist" :key="i">
                    <span class="" style="width:210px;display:inline-block;">{{item.item_name}}</span>                    
                    <span class="btn" @click="oprategoods('reduce',item.quantity,i)">-</span>
                    <input type="text" :value="item.quantity" placeholder="数量" />
                    <span class="btn" @click="oprategoods('add',item.quantity,i)" style="margin-right:8px">+</span>
                    <span class="btn" @click="oprategoods('up',item.quantity,i)">↑</span>
                    <span class ="btn" @click="oprategoods('down',item.quantity,i)">↓</span>
                </li>
            </ul>
            <ol v-if="searchItemGood.length != 0">
                <li v-for="(sitem,s) in searchItemGood" :key="s" @click="liClick(sitem)">{{sitem.item_name}}</li>
            </ol>
        </el-form-item>
    </div>
</template>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.sortNumgood{
    position: relative;
    ul{
        li{
            margin: 3px 0;
            .btn{
                display: inline-block;
                height: 40px;
                width:35px;
                text-align: center;
                font-size:16px;
                border:1px solid #ccc;
                border-radius: 2px;
                cursor:pointer;
            }
            input{
            display: inline-block;
                height: 40px;
                width:40px;
                text-align: center;
                font-size:16px;
                border:1px solid #ccc; 
                border-radius: 2px; 
            }
        }
    }
    ol{
        position: absolute;
        left: 0;
        top:40px;
        background: #fff;
        box-shadow: 0 0 13px #000;
        width: 463px;
        border-radius: 3px;        
        box-sizing: border-box;
        li{
            padding:0 5px;
            transition: all 0.2s;
        }
        li:hover{
            
           background: #e8eaf1
        }
    }    
}

</style>
<script>
import { abc } from "../../../js/abc.js";
import {potUrl} from '../../../js/config_url.js';
    export default {
        props:[
            'txt','curgood','showWidth'
        ],
        watch:{
            showgood(newVal,oldVal){
                var that = this;
                if(newVal == ''){
                    return
                }
                abc.get(that,potUrl.itemSearch,{keyword:newVal},function(res){
                    that.searchItemGood = res.data
                })
            },
            curgood(newval,oldval){
                console.log('newval',newval)
                this.lilist = this.curgood;
            }
        },
        data(){
            return {
                lilist:[],
                searchItemGood:[],
                labelTxt:'',
                showgood:''
            }
        },
        mounted(){
            this.labelTxt = this.txt;
            this.lilist = this.curgood;
            // this.showWidth = this.showWidth;
        },
        methods:{
            liClick(tem){
                let that = this;
                for(var i = 0;i<that.lilist.length;i++){
                    if(that.lilist[i].item_id == tem.item_id){
                        that.$notify.info({
                            title: '提示',
                            message: '不可重复添加同种商品~'
                        });
                        return;
                        break;
                    }
                }
                that.lilist.push(tem);
                that.lilist[that.lilist.length-1].quantity = 1;
                that.searchItemGood = [];
                that.showgood = '';
                that.searchgoodToP()
                that.$forceUpdate()
                
            },
            oprategoods(str,n,ins){
                var that = this;
                var num = parseInt(n)
                switch (str) {
                    case 'reduce':
                        num--;
                        that.lilist[ins].quantity = num
                        if(num == 0){
                            that.lilist.splice(ins,1)
                        }
                        
                        break;
                    case 'add':
                        num++;                        
                        that.lilist[ins].quantity = num
                        break;
                    case 'up':
                        console.log('up')
                        var curli = that.lilist[ins];
                        var preCurli =  that.lilist[ins-1];                   
                        that.lilist[ins] = preCurli;
                        that.lilist[ins-1] = curli;
                        that.$forceUpdate()
                        break;
                    case 'down':
                        var curli = that.lilist[ins];
                        var nextCurli =  that.lilist[ins+1];                   
                        that.lilist[ins] = nextCurli;
                        that.lilist[ins+1] = curli;
                        that.$forceUpdate()
                        break;
                    default:
                        break;
                }
                that.searchgoodToP()
                that.$forceUpdate()
            },
            searchgoodToP(){
                var that = this;
                that.$emit('throwFilePath',that.lilist)
            }
        }
    }
</script>